<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
    <style type="text/css">
        body {
            background-color: lightgoldenrodyellow;
        }
        #setting {
            width: fit-content;
            height: 80px;
            position: relative;
            margin: 0 auto;
        }
        #setting span {
            display: inline-block;
            margin: 23px;
            text-align: center;
            padding: 4px 20px 4px 20px;
            border: 2px lightblue solid;
            border-radius: 9px;
            cursor: pointer;
            transition: .6s;
        }
        #setting span:hover {
            background-color: lightyellow;
        }
        #base-bord {
            width: 560px;
            height: 560px;
            position: relative;
            margin: 20px auto;
        }
        #point-bord {
            width: 600px;
            height: 600px;
            position: absolute;
            top: -20px;
            left: -20px;
            border: 1px gray solid;
        }
        #moment-tip {
            width: fit-content;
            position: relative;
            margin: 0 auto;
            font-size: 24px;
            line-height: 50px;
            color: gray;
        }
        .con {
            width: 36px;
            height: 36px;
            float: left;
            border: 2px gray solid;
            margin: 0;
        }
        .point {
            width: 30px;
            height: 30px;
            float: left;
            margin: 3px;   
            border-radius: 16px;
            border: 2px rgba(1, 1, 1, 0) dashed;
            transition: .6s;
            text-align: center;
            line-height: 30px;
            color: red;
            cursor: pointer;
        }
        .point:hover {
            border: 2px rgba(9, 230, 64, 0.6) dashed;
            opacity: .6;
        }
    </style>
</head>
<body>
    <div id="setting">
        <span onclick="startGame()">开始对弈</span>
        <span onclick="stopGame()">清盘复原</span>
    </div>
    <div id="moment-tip">无禁手，黑棋先手</div>
    <div id="base-bord">
        <div id="point-bord" onclick="playClick(event)">
        </div>
    </div>
    <script>
        let baseBord = document.getElementById("base-bord");
        let pointBord = document.getElementById("point-bord");
        function printBase() {
            let conList = "";
            for(i=0; i<196; i++) {
                conList += "<div class='con'></div>";
            }
            baseBord.innerHTML += conList;
        }
        function printPoint() {
            let pointList = "";
            for(i=0; i<225; i++) {
                pointList += "<div class='point' ps='" + i + "'></div>";
            }
            pointBord.innerHTML += pointList;
        }
        printPoint();
        printBase();

        let moment = 0; //0:ready to start|1:black step time|2:white step time|3:game over
        let momentTip = document.getElementById("moment-tip");
        let stepList = new Array;
        let pointMap = new Array;
        for(i=0; i<15; i++) {
            pointMap[i] = new Array;
            for(j=0; j<15; j++) {
                pointMap[i][j] = "";
            }
        }

        function winer(who) {
            if(who === 1) momentTip.innerHTML = "黑方胜出";
            else momentTip.innerHTML = "白方胜出";
            momentTip.style.color = "red";
            moment = 3;
            stepNote();
        }
        function winerCheck(who) {
            if(stepList.length < 9) return false;
            let lastStep = stepList[stepList.length - 1];
            let x = parseInt(lastStep/15);
            let y = lastStep%15;
            let winPoint = 1;
            let row = x;
            let col = y;
            //竖向检查
            while(true) {
                row--;
                if(pointMap[row][col] === who) winPoint++;
                else {
                    row = x;
                    col = y;
                    break;
                }
            }
            while(true) {
                row++;
                if(pointMap[row][col] === who) winPoint++;
                else {
                    row = x;
                    col = y;
                    break;
                }
            }
            if(winPoint > 4) return winer(who);
            else winPoint = 1;
            //横向检查
            while(true) {
                col--;
                if(pointMap[row][col] === who) winPoint++;
                else {
                    row = x;
                    col = y;
                    break;
                }
            }
            while(true) {
                col++;
                if(pointMap[row][col] === who) winPoint++;
                else {
                    row = x;
                    col = y;
                    break;
                }
            }
            if(winPoint > 4) return winer(who);
            else winPoint = 1;
            //撇向检查
            while(true) {
                row--;
                col++;
                if(pointMap[row][col] === who) winPoint++;
                else {
                    row = x;
                    col = y;
                    break;
                }
            }
            while(true) {
                row++;
                col--;
                if(pointMap[row][col] === who) winPoint++;
                else {
                    row = x;
                    col = y;
                    break;
                }
            }
            if(winPoint > 4) return winer(who);
            else winPoint = 1;
            //捺向检查
            while(true) {
                row--;
                col--;
                if(pointMap[row][col] === who) winPoint++;
                else {
                    row = x;
                    col = y;
                    break;
                }
            }
            while(true) {
                row++;
                col++;
                if(pointMap[row][col] === who) winPoint++;
                else {
                    row = x;
                    col = y;
                    break;
                }
            }
            if(winPoint > 4) return winer(who);
            else winPoint = 1;
        }
        function playClick(event) {
            if(moment === 0||moment === 3) return false;
            if(event.target.classList[0] === "point"){
                if(event.target.style.backgroundColor != "black" && event.target.style.backgroundColor != "snow") {
                    if(moment === 1) {
                        event.target.style.backgroundColor = "black";
                        stepList[stepList.length] = event.target.getAttribute("ps");
                        pointMap[parseInt(stepList[stepList.length-1] / 15)][stepList[stepList.length-1] % 15] = 1;
                        moment = 2;
                        momentTip.innerHTML = "白方落子";
                        winerCheck(1);
                    } else {
                        event.target.style.backgroundColor = "snow";
                        stepList[stepList.length] = event.target.getAttribute("ps");
                        pointMap[parseInt(stepList[stepList.length-1] / 15)][stepList[stepList.length-1] % 15] = 0;
                        moment = 1;
                        momentTip.innerHTML = "黑方落子";
                        winerCheck(0);
                    }
                }
            }
        }
        function startGame() {
            if(moment === 3) stopGame();
            if(moment === 0) {
                moment = 1;
                momentTip.innerHTML = "黑方落子";
            }
        }
        function stopGame() {
            let nodeList = document.getElementsByClassName("point");
            for(i=0; i<nodeList.length; i++) {
                nodeList[i].style.backgroundColor = "";
            }
            for(i=0; i<15; i++) {
                for(j=0; j<15; j++) {
                    pointMap[i][j] = "";
                }
            }

            let pointList = document.getElementsByClassName("point");
            for(i=0; i<pointList.length; i++) {
                pointList[i].innerHTML = '';
            }
            stepList = [];
            moment = 0;
            momentTip.innerHTML = "无禁手，黑棋先手";
            momentTip.style.color = "gray";
        }
        function stepNote() {
            if(moment != 3) return 0; 
            let pointList = document.getElementsByClassName("point");
            console.log(stepList);
            console.log(pointList);
            for(i=0; i<stepList.length; i++) {
                pointList[stepList[i]].innerHTML = i+1;
            }
        }
        function info() {
            console.log("五子棋游戏-版本：1.0-开发者：失言");
        }
    </script>
</body>
</html>